import React, { useState } from 'react';
import { history } from 'umi';
import './taolun.less';
import img from '../img/条.png';
import { ArrowLeft, AddO, Search, BarChartO } from '@react-vant/icons';
import { Popover, Toast, Sticky } from 'react-vant';

const actions = [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }];
const items = [
  { id: 1, name: '热门', url: '/taolun/remen' },
  { id: 2, name: '闲置', url: '/taolun/xianzhi' },
  { id: 3, name: '求助', url: '/taolun/qiuzhu' },
  { id: 4, name: '吐槽', url: '/taolun/tucao' },
  { id: 5, name: '社区', url: '/taolun/shequ' },
];

export default function Index(props) {
  const select = (option) => Toast.info(option.text);
  let [xuannum, setxuannum] = useState(1);
  const tiaozhuan = (id, url) => {
    setxuannum(id);
    history.push(url);
  };
  return (
    <div className="taolun-box">
      <Sticky>
        {/* 顶部 */}
        <div className="shang">
          {/* 顶部上 */}
          <div className="shang-shang">
            {/* 顶部上左 */}
            <div className="shang-shang-left">
              <div className="tu">
                <ArrowLeft fontSize={30} />
              </div>
              <div className="ziti">讨论</div>
            </div>
            {/* 顶部上右 */}
            <div className="shang-shang-right">
              <div className="tu1">
                <AddO fontSize={30} onClick={() => history.push('/add')} />
              </div>
              <div className="tu2">
                <Search fontSize={30} />
              </div>
            </div>
          </div>
          {/* 顶部下 */}
          <div className="shang-xia">
            {items.map((item) => (
              <div className="shang-xia-nei" key={item.id}>
                <div
                  className={item.id === xuannum ? 'active' : ''}
                  onClick={() => tiaozhuan(item.id, item.url)}
                >
                  {item.name}
                </div>
              </div>
            ))}
            <Popover
              placement="bottom-start"
              actions={actions}
              onSelect={select}
              reference={<img src={img} alt="" style={{ height: '27px' }} />}
            />
          </div>
        </div>
      </Sticky>
      <div style={{ height: '133px' }}></div>
      {/* 内容 */}
      <div>{props.children}</div>
    </div>
  );
}
